<template>
  <div class="system-monitor-container no-background-container">
    <el-tabs v-model="activeTab">
      <el-tab-pane label="系统基本信息" name="system">
        <el-card style="margin-bottom: 0 !important;">
          <!-- 系统基本信息 -->
          <div class="section-title">系统基本信息</div>
          <SystemInfo ref="systemInfoRef" />

          <!-- 主板信息 -->
          <div class="section-title">主板信息</div>
          <MotherboardInfo ref="motherboardInfoRef" />

          <!-- CPU信息 -->
          <div class="section-title">CPU信息</div>
          <CpuInfo ref="cpuInfoRef" />

          <!-- 内存信息 -->
          <div class="section-title">内存信息</div>
          <MemoryInfo ref="memoryInfoRef" />

          <!-- 磁盘信息 -->
          <div class="section-title">磁盘信息</div>
          <DiskInfo ref="diskInfoRef" />

          <!-- 显卡信息 -->
          <div class="section-title">显卡信息</div>
          <GpuInfo ref="gpuInfoRef" />
        </el-card>
      </el-tab-pane>

      <!-- 添加服务监控标签页 -->
      <el-tab-pane label="服务监控" name="service">
        <service-info ref="serviceInfoRef" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import SystemInfo from './components/SystemInfo.vue'
import MotherboardInfo from './components/MotherboardInfo.vue'
import CpuInfo from './components/CpuInfo.vue'
import MemoryInfo from './components/MemoryInfo.vue'
import DiskInfo from './components/DiskInfo.vue'
import GpuInfo from './components/GpuInfo.vue'
import ServiceInfo from './components/ServiceInfo.vue'

const activeTab = ref('system')

// 组件引用
const systemInfoRef = ref()
const motherboardInfoRef = ref()
const cpuInfoRef = ref()
const memoryInfoRef = ref()
const diskInfoRef = ref()
const gpuInfoRef = ref()
const serviceInfoRef = ref()

// 初始化加载所有数据
onMounted(() => {
  systemInfoRef.value?.refresh()
  motherboardInfoRef.value?.refresh()
  cpuInfoRef.value?.refresh()
  memoryInfoRef.value?.refresh()
  diskInfoRef.value?.refresh()
  gpuInfoRef.value?.refresh()
})

// 监听标签页切换
watch(activeTab, (tab) => {
  switch (tab) {
    case 'system':
      systemInfoRef.value?.refresh()
      break
    case 'motherboard':
      motherboardInfoRef.value?.refresh()
      break
    case 'cpu':
      cpuInfoRef.value?.refresh()
      break
    case 'memory':
      memoryInfoRef.value?.refresh()
      break
    case 'disk':
      diskInfoRef.value?.refresh()
      break
    case 'gpu':
      gpuInfoRef.value?.refresh()
      break
    case 'service':
      serviceInfoRef.value?.refresh()
      break
  }
})
</script>

<style lang="scss" scoped>
.system-monitor-container {
  :deep(.el-tabs__content > #pane-system > .el-card > .el-card__body) {
    padding: 0 var(--el-padding) !important;
  }

  .section-title {
    font-size: 16px;
    font-weight: bold;
    margin: 20px 0 16px;
    padding-left: 8px;
    border-left: 4px solid var(--el-color-primary);
  }
}
</style>